<script setup>
  import { Edit, Delete } from '@element-plus/icons-vue'
  import { artGetListService, artDeleteListService } from '@/api/artcile'
  import { ref } from 'vue'

  // 添加 loading 等待效果控制变量
  const loading = ref(false)

  // 文章存储列表
  const articleList = ref([])

  // 获取文章列表
  const getarticleList = async () => {
    loading.value = true
    const res = await artGetListService()
    articleList.value = res.data
    loading.value = false
  }

  getarticleList()

  // 导入对话框模块，处理对话框
  import ChannelDialog from '@/views/article/components/ChannelDialog.vue'
  import { ElMessage } from 'element-plus'

  //实例化组件元素
  const dialog = ref()

  //处理添加按钮
  const handleAdd = () => {
    dialog.value.open({})
  }
  // 处理编辑按钮
  const handleEdit = row => {
    dialog.value.open(row)
  }
  // 处理删除按钮
  const handleDel = async row => {
    await ElMessageBox.confirm('你确定要删除吗', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await artDeleteListService(row.id)
    getarticleList()
    ElMessage.success('删除成功')
  }
  const changeList = () => {
    getarticleList()
  }
</script>

<template>
  <page-container title="文章分类">
    <template #extra>
      <el-button type="primary" @click="handleAdd">添加分类</el-button>
    </template>
    <el-table v-loading="loading" :data="articleList" style="width: 100%">
      <el-table-column
        type="index"
        width="80px"
        label="序号"
        align="center"
        prop=""
      ></el-table-column>

      <el-table-column
        align="center"
        label="分类名称"
        prop="cate_name"
      ></el-table-column>

      <el-table-column
        align="center"
        label="分类别名"
        prop="cate_alias"
      ></el-table-column>

      <el-table-column align="center" label="操作" prop="" #default="list">
        <el-button
          :icon="Edit"
          circle
          type="primary"
          plain
          @click="handleEdit(list.row, list.$index)"
        ></el-button>

        <el-button
          :icon="Delete"
          circle
          type="danger"
          plain
          @click="handleDel(list.row, list.$index)"
        ></el-button>
      </el-table-column>

      <template #empty>
        <el-empty description="暂时没有数据" />
      </template>
    </el-table>
  </page-container>
  <ChannelDialog ref="dialog" @success="changeList"></ChannelDialog>
</template>
<style lang="scss" scoped></style>
